<html>
<head>
	<title>bgframe! - by doug</title>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript" src="models/Main.js"></script>
	<script type="text/javascript" src="models/API.js"></script>
	<script type="text/javascript" src="models/MatchSearch.js"></script>
	<script type="text/javascript" src="models/MatchHost.js"></script>
	<script type="text/javascript" src="controllers/LoginPage.js"></script>
	<script type="text/javascript" src="controllers/MatchPage.js"></script>
	<script type="text/javascript" src="controllers/FindMatchPage.js"></script>
	<script type="text/javascript" src="controllers/HostMatchPage.js"></script>
	<script type="text/javascript" src="controllers/GamePage.js"></script>
	<script type="text/javascript" src="game/Game.js"></script>
	<script type="text/javascript" src="game/MouseEvents.js"></script>
	<script type="text/javascript" src="game/GameLogic.validator.js"></script>
	<script type="text/javascript" src="game/GameLogic.winChecker.js"></script>
	<script type="text/javascript" src="game/rules/NC.js"></script>
	<script type="text/javascript" src="game/rules/NCL.js"></script>
	<script type="text/javascript" src="game/rules/C4.js"></script>
	<script type="text/javascript" src="game/rules/SWAP.js"></script>
	<script type="text/javascript" src="game/rules/MUSKET.js"></script>
</head>
<body onload="Main.init();">

<div class="page" id="LoginPage">
	<p>Enter a username to begin!</p>
	<input type='text' placeholder="username" id="LPuser" />
	<select id="LPgamelist">
		<option value="NC">Naughts & Crosses</option>
		<option value="NCL">Naughts & Crosses (large)</option>
		<option value="C4">Connect 4</option>
		<option value="SWAP">The Swapping Game</option>
		<option value="MUSKET">The Three Musketeers</option>
	</select>
	<a class='button' onclick="Controllers.LoginPage.begin()">begin</a>
</div>

<div class="page" id="MatchPage">
	<a class='button back' onclick="Controllers.MatchPage.exitButton()">exit</a>
	<p>Welcome. Please select an option to begin playing.</p>
	<a class='button normal' onclick="Controllers.MatchPage.findButton()">find match</a>
	<a class='button normal' onclick="Controllers.MatchPage.hostButton()">host match</a>
</div>

<div class="page" id="FindMatchPage">
	<a class='button back' onclick="Main.goTo('MatchPage');">back</a>
	<p id="FMPindicator">searching...</p>
	<ul id="FMPlist">
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
		<li>blah</li>
	</ul>
</div>

<div class="page" id="HostMatchPage">
	<a class='button back' onclick="Controllers.HostMatchPage.back()">back</a>
	<p id="HMPindicator">searching for opponent...</p>
	<p class="HMPdetails"><span id="HMPplayer1">bob</span> vs <span id="HMPplayer2">...</span></p>
	<a class='button' onclick='Controllers.HostMatchPage.beginGame(this);'>begin</a>
</div>

<div class="page" id="GamePage">
	<a class='button back' onclick="Controllers.GamePage.quit()">quit game</a>
	<canvas id="GameBoard"></canvas>
	<div id="ScoreBoard">
		<div class="player selected" id="GPplayer1">bob</div>
		<div class="player" id="GPplayer2">joe</div>
	</div>
	<div id="Console"></div>
</div>

</body>
</html>